<template>
  <div v-if="source" class="OctopusDialog">
    <div class="Content">
      <transition name="fade">
        <div :class="'el-dialog__wrapper PanelMask ' + (source.visible ? 'OpenMask':'CloseMask')" v-show="source.visible ? true:false">
          <!--          <div class="el-dialog__wrapper PanelMask" v-show="source.visible ? true:false" v-on:click="hide($event.target)">-->
          <div role="dialog" aria-modal="true" aria-label="提示" class="el-dialog Dialog"
               v-bind:style="{width:source.width?source.width+'px':'80%'}">
            <div class="el-dialog__header" v-if="source.tips">
              <span class="el-dialog__title">{{source.title}}</span>
              <button type="button" aria-label="Close" class="el-dialog__headerbtn" v-if="source.close">
                <i class="el-dialog__close el-icon el-icon-close"></i></button>
            </div>
            <div class="content">
              <!-- {{source.width}} -->
              <slot name="content"></slot>
            </div>
            <div class="footer">
              <slot name="footer"></slot>
            </div>
            <slot name="default" :data="{row:1,cell:2}"></slot>
          </div>
        </div>
      </transition>
    </div>
  </div>
  <div v-else>Octopus Framework Initialization Exception.</div>
</template>

<script>
  export default {
    name: 'DialogEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
      }
    },
    created: function () {
      this.octopus.tips.debug("DialogEngine执行了created事件。");
    },
    mounted: function () {
      this.octopus.tips.debug("DialogEngine执行了mounted事件。");
    },
    activated: function () {
      this.init();
      this.octopus.tips.debug("DialogEngine执行了activated事件。");
    },
    deactivated: function () {
      this.octopus.tips.debug("DialogEngine执行了deactivated事件。");
    },
    destroyed() {
    },
    computed: {
      // 可参考标准List控件。
    },
    methods: {
      init: function () {

      },
      hide: function (dom) {
        let domClass = $(dom).attr("class");
        if (domClass != undefined) {
          if (domClass.indexOf("PanelMask") > -1) {
            // 隐藏时要加上动画。
            this.source.visible = false;
          }
        }
      },
    },
    watch: {
      // 可参考标准List控件。
    },
    props: ["source", "loaded", "created", "opened", "closed"]
  }
</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>
